<template>
  <div class="curr_week_task_board">
    <one-title title="当前周计划看板" @refreshData="refresh"></one-title>
    <div class="fixed_top_56" v-loading="isLoading">
      <empty-page v-if="isEmpty" :str="`暂无数据`"></empty-page>
      <div v-else>
        <div class="task_select">
          <el-select
            style="width: 300px;"
            v-if="pdfIdList.length > 1"
            v-model="pdfSrc"
            @change="handleChange"
            size="small"
            placeholder="请选择" value="">
            <el-option
              v-for="item in pdfIdList"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div style="height: 300px" v-loading="isPdfLoading">
          <pdf
            v-for="i in numPages"
            :key="i"
            :page="i"
            style="width: 80%; margin: 0 auto"
            :src="loadedSrc">
          </pdf>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import EmptyPage from '@/components/EmptyPage'

export default {
  name: 'CurrWeekTaskBoard',
  data() {
    return {
      isLoading: true,
      isPdfLoading: true,
      isEmpty: false, // 是否为空数据
      pdfIdList: [], // pdf文件地址列表
      pdfSrc: '', // pdf文件地址
      numPages: undefined, // 页数
      loadedSrc: ''
    }
  },
  mounted() {
    this.init()
  },
  components: {
    pdf,
    EmptyPage
  },
  methods: {
    previewPrev() {
      const ip = this.$store.state.userInfo.webServerIP
      const port = this.$store.state.userInfo.webServerPort
      return `//${ip}:${port}/a/uploadhistory/uploadHistory/preview/`
    },
    handleChange() {
      this.isPdfLoading = true
      this.numPages = undefined
      this.loadedSrc = pdf.createLoadingTask({url: this.previewPrev() + this.pdfSrc, withCredentials: true})
      this.loadedSrc.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(e => {
        this.$message.error({
          message: '预览失败',
          duration: 1500,
          center: true
        })
      }).finally(() => {
        this.isPdfLoading = false
      })
    },
    refresh() {
      this.init()
    },
    async init() {
      let list = await this.getCurrWeekPlan()
      if (list.length < 1) {
        this.isEmpty = true
        return
      }
      this.pdfIdList = list.reduce((pre, cur) => [...pre, {label: cur.name, id: cur.uploadHistoryId}], [])
      this.pdfSrc = this.pdfIdList[0].id
      this.handleChange()
    },
    getCurrWeekPlan() {
      this.isLoading = true
      let getData = {
        method: 'get',
        url: 'a/weekplan/weekPlan/getCurrentWeekPlan',
        noCommit: true,
        data: {
          pageNo: 1,
          pageSize: 9999,
          query: {
            weekPlanStatusId: 'ID_WPS_Confirmed'
          }
        }
      }
      return this.$store.dispatch('saveData', getData).then(res => {
        return res.data
      }).catch(() => {
        return []
      }).finally(() => {
        this.isLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .curr_week_task_board {
    .task_select {
      text-align: center;
      margin-top: 20px;
    }
  }
</style>
<style lang="less">
  .annotationLayer {
    display: none;
  }
</style>
